<template>
  <div class="container">
    <div class="wrap">
      <div style="width:30%" v-if="title"> {{title}}：</div>
      <textarea
        ref="inputText"
        type="text"
        class="inputEditor"
        :disabled="aboutDisabled"
        :placeholder="tip"
        v-model="showText"
        :maxlength="maxlength"
      />
      <i class="el-icon-edit" @click="editor" v-if="aboutDisabled"></i
      ><i class="el-icon-check" @click="editor" v-if="!aboutDisabled"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    maxlength: {
      default: 0,
      type: Number,
    },
    editorText: {
      default: '',
      type: String,
    },
    tip: {
      default: '',
      type: String,
    },
    title: {
      default: '',
      type: String,
    },
    type: {
      default: '0',
      type: String,
    },
  },
  data() {
    return {
      aboutDisabled: "false",
      showText: '',
      submitStore: this.newStore(),
    };
  },
  watch: {
    editorText(a) {
      this.showText = a;
    },
  },
  methods: {
    editor() {
      this.aboutDisabled = !this.aboutDisabled;
      this.$refs.inputText.removeAttribute('disabled');
      this.$refs.inputText.focus();
      if (this.aboutDisabled === true) {
        this.spost(this.submitStore, '/changeProfileInfo', {
          userId: this.$store.state.userInfo.userid,
          type: this.type,
          content: this.showText,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.wrap {
  display: flex;
  align-items:baseline  ;
  padding: 5px;
  .inputEditor {
    width: 95%;
    border: none;
    color: #888da8;
    background: white;
    resize: none;
    vertical-align: bottom;
  }
  i{
    visibility:hidden;
    margin-left: 5%;
    height: 100%;
  }
}
.wrap:hover{
  i{
    visibility:visible;
  }
}
</style>
